import React from 'react';
import {Marker} from 'react-bmap';
import BMap from 'BMap';
import marker from '../../assets/markers.png'
//这是个箭头函数  ，参数为{position。。。}
const CustomMark = (
    {
        position = {
            lng: 116.402544,
            lat: 39.928216
        },
        title='',
        width = 27,
        height = 39,
        background = `url(${marker})`,
        textAlign = 'center',
        lineHeight = '1em',
        color = 'white',
        backgroundPositionX='-24px',
        backgroundPositionY='-233px',
        type,
        events = {
            click() {
            }
        },
        ...otherProps
    }
                    ) => {
        if(type){
            backgroundPositionX='-225px';
            backgroundPositionY='-139px';
        }
        const style = {
            width: width + 'px',
            height: height + 'px',
            cursor:'pointer',
            textAlign,
            color,
            background,
            backgroundSize: '300px',
            backgroundPositionX,
            backgroundPositionY,
            backgroundRepeat: 'no-repeat',
        };
        const myStyle={
            color: 'black',
            fontSize: '12px',
            transform: 'translateY(-16px)',
            width: '75px',
            position: 'absolute',
            border: '1px solid blue',
            background: 'white',
            display: 'block',
            transition:' transform(100)'
        };
        const offset = new BMap.Size(-width / 2, -height);
        return (
            // fragment:没有意义的元素
            <React.Fragment>
                <Marker position={position} offset={offset}  {...otherProps} animation={true} >
                    <div style={style} onClick={events.click}>
                        {/*<span style={myStyle}>aaaa</span>*/}
                    </div>
                </Marker>
            </React.Fragment>
        )

};

//返回一个函数：参数是标注点的信息
export default CustomMark;
